import React, { Component } from "react";
import { List, InputItem, NavBar, Icon, Grid } from "antd-mobile";
import { connect } from "react-redux";
import { getMsgList, sendMsg, recvMsg,readMsg } from "../../redux/chat.redux";
import { getChatId } from "../../util";
import QueueAnim from 'rc-queue-anim';

@connect(
  state => state,
  { getMsgList, sendMsg, recvMsg,readMsg }
)
class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = { text: "", msg: [], showEmoJi: false };
  }
  componentDidMount() {
    console.log(this.props)
    if (!this.props.chatuser.chatmsg.length) {
      this.props.getMsgList();
      this.props.recvMsg();
    }
  
  }
  componentWillUnmount(){
    const to = this.props.match.params.user
    this.props.readMsg(to)
    console.log('unmount')
  }
  handleSubmit() {
    const from = this.props.user._id;
    const to = this.props.match.params.user;
    const msg = this.state.text;
    this.props.sendMsg({ from, to, msg });
    this.setState({ text: "" });
  }
  fixCarousel() {
    setTimeout(function() {
      window.dispatchEvent(new Event("resize"));
    }, 0);
  }
  render() {
    const emoji = "😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 😗 😙 😚 ☺️ 🙂 🤗 🤩 🤔 🤨 😐 😑 😶 🙄 😏 😣 😥 😮 🤐 😯 😪 😫 😴 😌 😛 😜 😝 🤤 😒 😓 😔 😕 🙃 🤑 😲 ☹️ 🙁 😖 😞 😟 😤 😢 😭 😦 😧 😨 😩 🤯 😬 😰 😱  😳 🤪 😵 😡 😠 🤬 😷 🤒 🤕 🤢 🤮 🤧 😇 🤠 🤡 🤥 🤫 🤭 🧐 🤓 😈 👿 👹 👺 💀 👻 👽 🤖 💩 😺 😸 😹 😻 😼 😽 🙀 😿 😾"
      .split(" ")
      .filter(v => v)
      .map(v => ({ text: v }));
    const userid = this.props.match.params.user;
    const Item = List.Item;
    const users = this.props.chatuser.users;
    if (!users[userid]) {
      return null;
    }
    const chatid = getChatId(userid, this.props.user._id);
    const chatmsgs = this.props.chatuser.chatmsg.filter(
      v => v.chatid === chatid
    );
    return (
      <div id="chat-page">
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            this.props.history.goBack();
          }}
        >
          {users[userid].name}
        </NavBar>
        <QueueAnim type={'left'}>
          {chatmsgs.map(v => {
            const avatar = require(`../../component/img/${
              users[v.from].avatar
            }.png`);
            return v.from === userid ? (
              <List key={v._id}>
                <Item thumb={avatar}>{v.content}</Item>
              </List>
            ) : (
              <List key={v._id}>
                <Item extra={<img src={avatar} alt='avatar'/>} className="chat-me">
                  {v.content}
                </Item>
              </List>
            );
          })}
        </QueueAnim>
        <div className="stick-footer">
          <List>
            <InputItem
              placeholder="请输入"
              value={this.state.text}
              onChange={v => {
                this.setState({ text: v });
              }}
              extra={
                <div>
                  <span
                    style={{ marginRight: 15 }}
                    onClick={() => {
                      this.setState({
                        showEmoJi: !this.state.showEmoJi
                      });
                      this.fixCarousel();
                    }}
                  >
                    😀
                  </span>
                  <span
                    onClick={() => {
                      this.handleSubmit();
                      this.setState({
                        showEmoJi: false
                      });
                    }}
                  >
                    发送
                  </span>
                </div>
              }
            >
              信息
            </InputItem>
          </List>
          {this.state.showEmoJi ? (
            <Grid
              data={emoji}
              columnNum={9}
              carouselMaxRow={4}
              isCarousel={true}
              onClick={el => {
                console.log(el);
                this.setState({
                  text: this.state.text + el.text
                });
              }}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

export default Chat;
